<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { userInfo } from "/stores/user";
import { updateTeacher, getTeacherById } from '/api/provide';

const sexs = [
	{
		text: '男',
		value: 1
	},
	{
		text: '女',
		value: 0
	},
]

const formData = reactive({
	avatar: '',
	name: userInfo.value.teacherName,
	sex: userInfo.value.gender,
	phone: userInfo.value.teacherPhone,
	email: userInfo.value.teacherEmail
})
const rules = {
	name: {
		rules: [
			{ required: true, errorMessage: '请填写姓名' }
		]
	},
	phone: {
		rules: [
			{ required: true, errorMessage: '请填写手机号码' }
		]
	},
}

const form = ref()
async function submit() {
	await form.value.validate()
	await updateTeacher({
		teacherName: formData.name,
		teacherPhone: formData.phone,
		gender: formData.sex,
		teacherEmail: formData.email,
	})
	const info = await getTeacherById()
	userInfo.value = info?.data || {}
	await uni.navigateBack()
	uni.showToast({
		title: '修改成功',
	})
}
</script>

<template>
	<view class="T_page T_form">
		<uni-forms ref="form" :modelValue="formData" :rules="rules" :label-width="100">
			<uni-forms-item name="avatar" label="头像：">
				<view class="face">
					<image src="/static/svg/avatar-default.svg" />
				</view>
			</uni-forms-item>
			<uni-forms-item name="name" label="姓名：">
				<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" v-bind="uni.$easyinput_attrs" />
			</uni-forms-item>
			<uni-forms-item name="sex" label="性别：">
				<uni-data-checkbox v-model="formData.sex" :localdata="sexs" />
			</uni-forms-item>
			<uni-forms-item name="phone" label="手机号码：">
				<uni-easyinput type="number" v-model="formData.phone" placeholder="请输入手机号码" v-bind="uni.$easyinput_attrs" />
			</uni-forms-item>
			<uni-forms-item name="email" label="邮箱：">
				<uni-easyinput type="text" v-model="formData.email" placeholder="请输入邮箱" v-bind="uni.$easyinput_attrs" />
			</uni-forms-item>
		</uni-forms>
		<view class="tips">修改手机号需要重新登录，请谨慎修改</view>
		<button class="submit" type="primary" @click="submit">保存</button>
	</view>
</template>

<style lang="scss" scoped>
.T_form:deep().uni-forms {
	margin-bottom: 20rpx;
}

.face {
	display: flex;
	align-items: center;
	gap: 20rpx;

	image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		padding: 10rpx;
		box-sizing: border-box;
		background-color: #f8f8f8;
	}
}

.tips {
	text-align: center;
	font-size: 22rpx;
	color: #9CA3AF;
	margin-bottom: 60rpx;
}
</style>
